<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">

<head>
    <title></title>
    <script type="text/javascript" src="/pageoffice.js"></script>
    <script type="text/javascript">
        function ConvertFile() {
            document.getElementById("Button1").disabled = true;

            //设置保存方法
            filemakerctrl.SaveFilePage="/FileMakerSingle/save";
            //注意：CallFileMaker是pageoffice.js中封装好的方法，专门供调用FileMakerCtrl生成文件使用
            filemakerctrl.CallFileMaker({
                //url：指向服务器端FileMakerCtrl生成文件的controller地址
                url: "/FileMakerSingle/FileMakerSingle",
                success: function (res) {//res:获取服务器端fs.setCustomSaveResult设置的保存结果
                    console.log(res);
                    console.log("completed successfully.");
                    setProgress(100);
                },
                progress: function (pos) {
                    console.log("running "+pos+"%");
                    setProgress(pos);
                },
                error: function (msg) {
                    console.log("error occurred: "+msg);
                }
            });
        }

        function setProgress(percent) {
            var progressBar = document.getElementById("progressBar");
            progressBar.style.width = percent + '%';
            progressBar.innerText = percent + '%';
        }
    </script>
    <style>
        #progressBarContainer {
            width: 500px;
            background-color: #e0e0e0;
            border-radius: 5px;
            padding: 3px;
            margin: 10px auto;
        }

        #progressBar {
            height: 20px;
            width: 0%;
            background-color: #76b900;
            border-radius: 5px;
            text-align: center;
            line-height: 20px; /* 使文字垂直居中 */
            color: white;
        }
    </style>
</head>
<body>
<div style="text-align: center;">
    <h3 style="margin:20px;">演示：模拟后台填充数据到Word模板生成文件的效果</h3>
    <div style="width:650px;margin: 0 auto; font-size:14px;">
        <p style="text-align: left;">
            演示内容：<br/>
            &nbsp;&nbsp;&nbsp;&nbsp;本示例演示了调用FileMaker对象在客户端动态生成Word文件并自动保存到服务器上，却不显示打开文件界面的功能，模拟了直接在服务器端填充数据到Word模板生成文件的效果。
        </p>
        <p style="text-align: left;">
            操作说明：<br/>
            &nbsp;&nbsp;&nbsp;&nbsp;1. 点击“生成Word文件”按钮，执行动态填充数据到荣誉证书模板“template.doc”的程序，生成一份真正的荣誉证书文件。<br/>
            &nbsp;&nbsp;&nbsp;&nbsp;2. 生成完毕后，即可在“static/doc/FileMakerSingle”目录下看到生成的Word文件：maker.doc。
        </p>
    </div>
    <input id="Button1" type="button" value="生成Word文件" onclick="ConvertFile()"/>
    <div id="progressBarContainer">
        <div id="progressBar"></div>
    </div>
</div>
</body>

</html>
